<template>
  <div class="good" @click="handleClick">
    <div class="good-wrapper">
      <div class="good-header">
        <div>{{ borrowDay }}天</div>
        <p>{{ borrowName }}</p>
      </div>
      <div class="good-content">
        <div class="good-content-left">
          <div>
            <strong :style="{color: color}">{{ borrowRate.toFixed(1) }}</strong>
            <span v-show="borrowAwardRate !== 0 && isNewer" :style="{color: color}">+{{ borrowAwardRate }}</span>
          </div>
          <p>借款利率(%)</p>
        </div>
        <div class="good-content-right">
          <div class="good-content-right-top">
            <div>
              <p><strong :style="{color: color}">{{ formatInvestMoney[0] }}.</strong><span :style="{color: color}">{{ formatInvestMoney[1] }}</span>万元可投</p>
              <div class="progress-bar">
                <div class="amount" :style="{width: Percentage + '%', background: color}"></div>
                <div class="circle" :style="{borderColor: color}"></div>
              </div>
            </div>
            <p class="good-content-right-per">{{ Percentage }}%</p>    
          </div>
          <p>融资总额{{ (borrowMoney / 10000).toFixed(2) }}万</p>
        </div>
      </div>
    </div>
    <div class="good-label">
      <img :src="currentLabel" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      borrowDay: {
        type: Number,
        default: 0
      },
      borrowRate: {
        type: Number,
        default: 0 // 年化收益
      },
      borrowName: {
        type: String
      },
      borrowNewhand: {
        type: String,
        default: '0'
      },
      borrowMoney: { // 借款金额
        type: Number,
        default: 0
      },
      borrowProductTypeName: { // 分秒月赢
        type: String
      },
      borrowAwardRate: { // 奖励年化收益
        type: Number,
        default: 0
      },
      borrowTransferMoney: { // 已融资金额
        type: Number,
        default: 0
      },
      borrowStatus: {
        type: String,
        default: '0'
      },
      borrowOrder: {
        type: String,
        default: '0'
      },
      color: { // 标的颜色
        type: String,
        default: ''
      },
      lableType: {
        type: String,
        default: 'normal'
      }
    },
    data () {
      return {
        newerImg: require('@/assets/home_fuli@3x.png'),
        redNewerImg: require('@/assets/jiaobiao_xinshou@3x.png'),
        paymentImg: require('@/assets/over_icon.png'),
        finishedImg: require('@/assets/touzizhuanquover_icon.png')
      }
    },
    computed: {
      isNewer () {
        if (this.$cookie.get('acctKey')) {
          return this.$store.state.user.memberInvestor === '0'
        } else {
          return true
        }
      },
      currentLabel () {
        if (this.borrowStatus === '4') {
          if (this.borrowNewhand === '1') {
            if (this.lableType === 'newRed') {
              return this.redNewerImg
            }
            return this.newerImg
          }
        } else if (this.borrowStatus === '6' || this.borrowStatus === '5') {
          return this.paymentImg
        } else if (this.borrowStatus === '7') {
          return this.finishedImg
        }
      },
      Percentage () {
        const perMoney = (this.borrowTransferMoney / this.borrowMoney) * 100
        const per = Number(perMoney.toFixed(0)) // 百分比数值
        if (per === 100 && this.borrowTransferMoney === this.borrowMoney) {
          return 100
        } else if (per === 100 && this.borrowTransferMoney !== this.borrowMoney) { // 进位，但是投资实际投资不为100%，按99%算
          return 99
        } else {
          return per
        }
      },
      formatInvestMoney () {
        const investableMoney = this.borrowMoney - this.borrowTransferMoney
        const transformMoney = (investableMoney / 10000).toFixed(2) // 转换为XX.XX万元，保留两位小数
        const splitMoney = transformMoney.split('.') // 分割维数组，主要用于UI展示，小数后面的样式不一样
        return splitMoney
      }
    },
    methods: {
      handleClick () {
        if (this.$route.query['type'] && this.$route.query['type'] !== '') {
          return
        }
        this.$router.push(`/goodDetail/${this.borrowOrder}`)
      }
    }
  }
</script>

<style lang='scss' scoped>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .good {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    padding: 20px 0 30px 0;
    background: $good-background__color;
    &-wrapper {
      width: 94%;
      margin: 0 auto;
    }
    &-header {
      display: flex;
      width: 100%;
      margin-bottom: 40px;
      div {
        box-sizing: border-box;
        width: 100px;
        height: 50px;
        border-radius: 4px;
        font-size: 27px;
        line-height: 52px;
        color: $good-lendDate__color;
        text-align: center;
        font-weight: 400;
        border: 1px solid #{$good-lendDate__color};
        border-radius: 4px;
      }
      p {
        flex: 1;
        height: 50px;
        font-size: 30px;
        line-height: 60px;
        color: $good-title__color;
        text-indent: 20px;
        font-weight: 400;        
      }
    }
    &-content {
      display: flex;
      justify-content: space-between;
      &-left {
        div {
          font-size: 60px;
          height: 60px;
          margin-bottom: 26px;
          font-size: 0;
          strong {
            font-size: 56px;
            font-weight: bold;
            color: $good-lendRate__color;
          }
          span {
            font-size: 38px;
            font-weight: bold;
            color: $good-rewardRate__color;
          }
        }
        p {
          font-size: 28px;
          color: $good-rateDesc__color;
          font-weight: 400;                      
        }
      }
      &-right {
        &-top {
          display: flex;
          margin-bottom: 30px;
          &>div {
            margin-bottom: 2px;
            margin-right: 10px;
            p {
              font-size: 28px;
              color: $good-investMoney__color;
              margin-bottom: 10px;
              height: 36px;
              strong {
                font-size: 40px;
                color: $base-ff6c00;
                font-weight: bold;             
              }
              span {
                font-size: 40px;
                color: $base-ff6c00;
                font-weight: bold;
              }
            }
            .progress-bar {
              display: flex;
              width: 360px;
              height: 6px;
              background: $base-e5e5e5;
              border-radius: 3px;
              .amount {
                height: 6px;
                width: 0; // progressBar的长度
                background: $base-ff6c00;
                border-radius: 3px 0 0 3px;
                transition: all 5s ease;
              }
              .circle {
                flex: none;
                position: relative;
                top: -4px;
                left: -2px;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                border: 6px solid $base-ff6c00;
                background: $base-fff;
                @media (-webkit-min-device-pixel-ratio: 1) {
                  width: 6px;
                  height: 6px;
                  border-width: 6px;
                }
                @media (-webkit-min-device-pixel-ratio: 2) {
                  top: -5px;
                  width: 6px;
                  height: 6px;
                  border-width: 5px;
                }
                @media (-webkit-min-device-pixel-ratio: 3) {
                  top: -4px;
                  width: .06rem;
                  height: .06rem;
                  border-width: .06rem;
                }
              }
            }
          }
          p {
            margin-bottom: -6px;
            align-self: flex-end;
            font-size: 30px;
            line-height: 24px;
            color: $good-rateDesc__color;
            font-weight: 400;        
          }
        }
        &-per {
          width: 60px;
          text-align: right;
        }
        &>p {
          float: right;
          font-size: 28px;
          color: $good-totalInvest__color;
          font-weight: 400;
        }
      }
    }
    &-label {
      position: absolute;
      top: 0;
      right: 0;
      img {
        display: block;
        width: 140px;
      }
    }
  }
</style>
